import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)

export default new Vuex.Store({
    plugins: [createPersistedState()],
    state: {
        todos: [],
        arr: [1, 2, 3]
    },
    mutations: {
        addTodo(state, todo) {
            state.todos.push(todo)
        },
        removeTodo(state, todo) {
            state.todos.splice(state.todos.indexOf(todo), 1)
        },
        editTodo(state, { todo, text = todo.text, done = todo.done }) {
            let index = state.todos.indexOf(todo)
            state.todos.splice(index, 1, {
                ...todo,
                text,
                done
            })
        },
    },
    actions: {
        // 新增
        addTodo({ commit }, text) {
            commit('addTodo', {
                text,
                done: false
            })
        },
        // 删除
        removeTodo({ commit }, text) {
            commit('removeTodo', text)
        },
        // 修改
        editTodo({ commit }, { todo, value }) {
            commit('editTodo', { todo, text: value })
        },
        // 选中状态
        toggleTodo({ state, commit }, todo) {
            commit('editTodo', { todo, done: !todo.done })
        },
        // 全部选中
        toggleAll({ state, commit }, done) {
            state.todos.forEach(todo => {
                // console.log(todo)
                commit('editTodo', { todo, done })
            })
        },
        clearAll({ state, commit }) {
            console.log(state.todos)
            state.todos.filter(todo => todo.done)
                .forEach(todo => {
                    commit('removeTodo', todo)
                })
        }
    },
    getters: {},

})
